<template>
    <div class="w-full bg-[#0C0E12] py-16 lg:py-24">
        <div class="max-w-screen-xl mx-auto px-4 lg:px-8 flex flex-col items-center justify-center">
            <p class="font-semibold text-[#CECFD2] font-sans text-base">Features</p>
            <h2 class="mt-3 font-sans font-semibold text-2xl lg:text-4xl text-[#F7F7F7]">There's even more.</h2>
            <p class="mt-3 lg:mt-5 font-sans text-[#94979C] text-center lg:text-left text-base lg:text-lg">AmplitudeJS is open source and freely available on Github.</p>
        </div>

        <div class="grid grid-cols-1 md:grid-cols-2 gap-x-8 gap-y-8 lg:grid-cols-3 lg:gap-x-8 lg:gap-y-16 mt-16">
            <div class="flex flex-col items-center">
                <img src="/images/icons/grey-outline-book.svg" class="w-12"/>
                <h3 class="mt-4 font-sans font-semibold text-lg text-[#F7F7F7]">Completely Documented</h3>
                <p class="mt-1 font-sans text-[#94979C] text-base">Simple, beautiful, and to the point.</p>
            </div>
            
            <div class="flex flex-col items-center">
                <img src="/images/icons/grey-outline-lightning.svg" class="w-12"/>
                <h3 class="mt-4 font-sans font-semibold text-lg text-[#F7F7F7]">No Dependencies</h3>
                <p class="mt-1 font-sans text-[#94979C] text-base">We don't pull in any other packages.</p>
            </div>

            <div class="flex flex-col items-center">
                <img src="/images/icons/grey-outline-keyboard-shortcuts.svg" class="w-12"/>
                <h3 class="mt-4 font-sans font-semibold text-lg text-[#F7F7F7]">Keyboard Shortcuts</h3>
                <p class="mt-1 font-sans text-[#94979C] text-base">Speed up the listening experience.</p>
            </div>

            <div class="flex flex-col items-center">
                <img src="/images/icons/grey-outline-smile.svg" class="w-12"/>
                <h3 class="mt-4 font-sans font-semibold text-lg text-[#F7F7F7]">Structured Data</h3>
                <p class="mt-1 font-sans text-[#94979C] text-base">Dynamically load JSON data for your playlist.</p>
            </div>

            <div class="flex flex-col items-center">
                <img src="/images/icons/grey-outline-shuffle.svg" class="w-12"/>
                <h3 class="mt-4 font-sans font-semibold text-lg text-[#F7F7F7]">Advanced Controls</h3>
                <p class="mt-1 font-sans text-[#94979C] text-base">Use any media control (shuffle, repeat, etc).</p>
            </div>

            <div class="flex flex-col items-center">
                <img src="/images/icons/grey-outline-control.svg" class="w-12"/>
                <h3 class="mt-4 font-sans font-semibold text-lg text-[#F7F7F7]">Dynamic Speed Controls</h3>
                <p class="mt-1 font-sans text-[#94979C] text-base">Change the playback speed (great for podcasts!)</p>
            </div>
        </div>
    </div>
</template>
